<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="font/iconfont.css" />
		<link rel="shortcut icon" href="favicon.ico" />
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo"><i class="iconfont icon-ai"></i><cite>智能AI管理服务平台</cite></div>
				<div class="shrink-icon" id="shrink"><i class="layui-icon layui-icon-shrink-right"></i></div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="img/yonghu.jpg" class="layui-nav-img">
							李艾
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">基本资料</a></dd>
							<dd><a href="">安全设置</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="">退出</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black my-sider-bar">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="subNav">
						<li class="layui-nav-item layui-nav-itemed" lay-tips="首页" lay-id="index">
							<a class="" href="javascript:;"><i class="iconfont icon-home"></i><cite>首页</cite></a>
							<dl class="layui-nav-child">
								<dd lay-id="center1" lay-tips="客服页面"><a href="javascript:;">客服页面</a></dd>
								<!-- <dd lay-id="center2" lay-tips="客户页面2"><a href="javascript:;">客户页面2</a></dd> -->
								<dd lay-id="center3" lay-tips="运维页面"><a href="javascript:;">运维页面</a></dd>
								<!-- <dd lay-id="center4" lay-tips="客户页面4"><a href="javascript:;">客户页面4</a></dd> -->
								<dd lay-id="center5" lay-tips="领导页面"><a href="javascript:;">领导页面</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item" lay-tips="知识库" lay-id="list">
							<a href="javascript:;"><i class="iconfont icon-zhishiku"></i><cite>知识管理</cite></a>
						</li>
						<li class="layui-nav-item" lay-tips="资产管理" lay-id="project_info">
							<a href="javascript:;"><i class="iconfont icon-ziyuan"></i><cite>资产管理</cite></a>
						</li>
						<li class="layui-nav-item" lay-tips="维修保养" lay-id="repair">
							<a href="javascript:;"><i class="iconfont icon-weibaojilu"></i><cite>维修保养</cite></a></li>
						<li class="layui-nav-item" lay-tips="工单管理" lay-id="order_info">
							<a href="javascript:;"><i class="iconfont icon-gongdan"></i><cite>工单管理</cite></a>
						</li>
						<li class="layui-nav-item" lay-tips="机房管理" lay-id="jifang">
							<a href="javascript:;"><i class="iconfont icon-jifang"></i><cite>机房管理</cite></a></li>
						<li class="layui-nav-item" lay-tips="值班管理" lay-id="duty_plan">
							<a href="javascript:;"><i class="iconfont icon-zhibanbiao"></i><cite>值班管理</cite></a>
						</li>
						<li class="layui-nav-item" lay-tips="巡检管理" lay-id="xunjian">
							<a href="javascript:;"><i class="iconfont icon-xunjianchulirenyuan"></i><cite>巡检管理</cite></a>
							<dl class="layui-nav-child">
								<dd lay-id="xj_manage" lay-tips="巡检管理"><a href="javascript:;">巡检管理</a></dd>
								<dd lay-id="xj_list" lay-tips="巡检查看"><a href="javascript:;">巡检查看</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item" lay-tips="应急管理" lay-id="yingji">
							<a href="javascript:;"><i class="iconfont icon-73"></i><cite>应急管理</cite></a></li>
						<li class="layui-nav-item" lay-tips="统计分析" lay-id="tongji">
							<a href="javascript:;"><i class="iconfont icon-tongji"></i><cite>统计分析</cite></a></li>
						<li class="layui-nav-item" lay-tips="后台管理" lay-id="set">
							<a href="javascript:;"><i class="iconfont icon-shezhi"></i><cite>后台管理</cite></a>
							<dl class="layui-nav-child">
								<dd lay-id="dept_manage" lay-tips="组织管理"><a href="javascript:;">组织管理</a></dd>
								<dd lay-id="role_manage" lay-tips="角色管理"><a href="javascript:;">角色管理</a></dd>
								<dd lay-id="user_manage" lay-tips="用户管理"><a href="javascript:;">用户管理</a></dd>
								<dd lay-id="process_manage" lay-tips="流程管理"><a href="javascript:;">流程管理</a></dd>
								<dd lay-id="type_manage" lay-tips="分类管理"><a href="javascript:;">分类管理</a></dd>
								<dd lay-id="label_manage" lay-tips="标签管理"><a href="javascript:;">标签管理</a></dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>

			<div class="layui-body">
				<div class="layui-tab layui-tab-brief" lay-filter="tabBrief" lay-allowClose="true">
					<ul class="layui-tab-title">
						<li class="layui-this" lay-id="index"><i class="layui-icon layui-icon-home"></i></li>
					</ul>
					<div class="layui-tab-content ">
						<div class="layui-tab-item layui-show ">
							<iframe src="pages/center5.html" frameborder="0" class="layadmin-iframe"></iframe>
						</div>
					</div>
					<i class="tab-control layui-icon layui-icon-prev"></i>
					<i class="tab-control layui-icon layui-icon-next"></i>
					<div class="tab-control layui-icon layui-icon-down">
						<ul class="layui-nav" lay-filter="tabClose" >
						  <li class="layui-nav-item" >
							<a href="javascript:;" >按钮</a>
							<dl class="layui-nav-child">
							  <dd><a href="javascript:;" lay-event="closeThisTab">关闭当前标签页</a></dd>
							  <dd><a href="javascript:;" lay-event="closeOtherTabs">关闭其他标签页</a></dd>
							  <dd><a href="javascript:;" lay-event="closeAllTabs">关闭所有标签页</a></dd>
							</dl>
						  </li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script>
			//getHash()
			layui.use(['element', 'layer'], function() {
				var element = layui.element,
					layer = layui.layer;
				//监听导航点击
				element.on('nav(subNav)', function(e) {
					var obj = $(e[0]).parent()[0];
					var title = $(obj).attr('lay-tips');
					var src = '';
					var layId = $(obj).attr('lay-id');
					var flag = true;
					var isAdd = true;
					if (layId == 'index') {
						flag = true;
					}else if(layId == 'center1'){
						src = 'pages/center.html';
					}else if(layId == 'center2'){
						src = 'pages/center2.html';
					}else if(layId == 'center3'){
						src = 'pages/center3.html';
					}else if(layId == 'center4'){
						src = 'pages/center4.html';
					}else if(layId == 'center5'){
						src = 'pages/center5.html';
					}else if (layId == 'list') {
						src = 'pages/knowledge/list.html';
					}else if(layId == 'type_manage'){
						src = 'pages/knowledge/type_list.html';
					}else if(layId == 'label_manage'){
						src = 'pages/knowledge/label_list.html';
					}else if(layId == 'project_info'){
						src = 'pages/project/index.html';
					}else if(layId == 'order_info'){
						src = 'pages/order/index.html';
					}else if(layId == 'duty_plan'){
						src = 'pages/duty/duty_list.html';
					}else if(layId == 'jifang'){
						src = 'pages/jifang/list.html';
					}else if(layId == 'xj_manage'){
						src = 'pages/xunjian/manage.html';
					}else if(layId == 'xj_list'){
						src = 'pages/xunjian/list.html';
					}else if(layId == 'dept_manage'){
						src = 'pages/org/dept/dept_list.html';
					}else if(layId == 'role_manage'){
						src = 'pages/org/role/role_list.html';
					}else if(layId == 'user_manage'){
						src = 'pages/org/user/user_list.html';
					}else if(layId == 'process_manage'){
						src = 'pages/org/process/process_index.html';
					}else {
						flag = false;
						if($("body").hasClass("layadmin-side-shrink")){
							$("#shrink").click();
						}
					}
					tabAdd(title,layId,src,flag,isAdd)
				})
				//点击收缩导航
				$("#shrink").on("click", function() {
					$("body").toggleClass("layadmin-side-shrink");
					let className = $(this).find(".layui-icon").attr("class").split(" ")[1];
					if (className == 'layui-icon-shrink-right') {
						$(this).find("i").removeClass("layui-icon-shrink-right").addClass("layui-icon-spread-left");
					} else {
						$(this).find("i").removeClass("layui-icon-spread-left").addClass("layui-icon-shrink-right");
					}

				})
				//收缩导航鼠标滑过时展示tips
				$(".my-sider-bar .layui-nav-item").hover(function() {
					if ($("body").hasClass("layadmin-side-shrink")) {
						layer.tips($(this).attr("lay-tips"), this);
					}

				})
				//监听tab关闭
				element.on('nav(tabClose)', function(e) {
					var event = $(e).attr('lay-event');
					var list = $(".layui-tab-title li");
					if(event == 'closeThisTab'){
						var thisTab = $(".layui-tab-title .layui-this");
						if($(thisTab).index() > 0){
							list.eq($(thisTab).index()-1).addClass('layui-this');
							element.tabDelete('tabBrief',$(thisTab).attr('lay-id'))
						}
					}else if(event == 'closeOtherTabs'){
						list.each( function(index){
							if(index != 0 && !$(this).hasClass('layui-this')){
								element.tabDelete('tabBrief',$(this).attr('lay-id'));
							}
						})
					}else if(event == 'closeAllTabs'){
						list.each( function(index){
							if(index == 0){
								$(this).addClass('layui-this');
							}else{
								element.tabDelete('tabBrief',$(this).attr('lay-id'));
							}
						})
					}
				})
				//向左移按钮点击事件
				$(".layui-icon-prev").on('click',function(){
					var tabTitle = $(".layui-tab-title")[0];
					var left = parseFloat($(tabTitle).css('left'));
					if(left < 0){
						$(tabTitle).css('left',`0px`);
					}
				})
				//向右移按钮点击事件
				$(".layui-icon-next").on('click',function(){
					var tabTitle = $(".layui-tab-title")[0];
					var scrollWidth = tabTitle.scrollWidth;
					var clientWidth = tabTitle.clientWidth;
					if(scrollWidth > clientWidth){
						$(tabTitle).css('left',`-${clientWidth}px`);
					}
				})
			})

			/*tab新增
			* title：名称
			* layid:对应的唯一识别
			* src:页面路径
			* flag:是否新增，是true，否false
			* isAdd：新增还是切换，避免添加多个重复的
			*/
			function tabAdd(title,layId,src,flag,isAdd){
				$(".layui-tab-title li").each(function(){
					if(layId == $(this).attr("lay-id")){
						isAdd = false;
					}
				});
				if (flag) {
					if(isAdd){
						var content = `<iframe src='${src}' frameborder='0' class='layadmin-iframe'></iframe>`;
						layui.element.tabAdd('tabBrief', {
							title: title
							,content: content //支持传入html
							,id: layId
						});
					}
					layui.element.tabChange('tabBrief', layId);
				}
			}
		</script>
	</body>
</html>
